<template>
	<view class="input-box">
		<view class="input-icon" v-if="icon !='false'">
			<text class="iconfont" :class="icon" :style="{'fontSize':iconFont,'color':inconColor}"></text>
		</view>
		<view class="input-right">
			<u-input v-model="val" :type="inputType" @blur="inpuBlue" :border="false" :placeholder="placeholderText" :maxlength="maxLenght" :height="inputHeight"
			 :clearable="true" @input="clearVal"
			 />
		</view>
	</view>
</template>

<script>
	export default{
		name:"lInoput",
		props:{
			/*  input 类型  */
			inputType:{
				type:String,
				default:'text'
			},
			/*  icon 名称  */
			icon:{
				type:String,
				default:"false"
			},
			/*  icon 大小  */
			iconFont:{
				type:String,
				default:"24rpx",
			},
			/*  icon 颜色  */
			inconColor:{
				type:String,
				default:"#888888"
			},
			/*  提示文字  */
			placeholderText:{
				type:String,
				default:'请输入内容'
			},
			/*  inpu 高度  */
			inputHeight:{
				type:String,
				default:"70"
			},
			 /*  最大长度 */ 
			maxLenght:{
				type:Number,
				default:16,
			},
			/*  需要传一个值得名称过来 getVal 是会返回  */
			valName:{
				type:String,
				default:"phone"
			}
		},
		data(){
			return{
				val:"",
			}
		},
		methods:{
			inpuBlue(){
				let val = this.val
				let name = this.valName
				this.$emit("getVal",val,name)
			},
			clearVal(val){
				let name = this.valName
				this.$emit("getVal","",name)
			}
		}
	}
</script>

<style scoped lang="scss">
	.input-box{
		width: 100%;
		padding: 0;
		margin: 0;
		position: relative;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.input-icon{
			flex-grow: 0;
			padding-right: 20rpx;
		}
		.input-right{
			flex-grow: 1;
			font-size: 32rpx;
		}
	}
</style>
